{% if section and section.type == "footer" %}
  {% assign section = section %}
{% else %}
  {% assign section = global.sections.footer %}
{% endif %}

{% stylesheet %}
  #footer_box {
    background: var(--footer-bg-color);
    color: var(--footer-font-color);
    position: relative;
  }
  #footer_box .footer_link {
    display: flex;
    justify-content: space-between;
    padding: 80px 0 0;
    border-top: 1px solid rgba(0, 0, 0, 0.15);
  }
  #footer_box .footer_link dl {
    width: 25%;
  }
  #footer_box .footer_link dt .footer_nav_down {
    display: none;
  }
  #footer_box .footer_link dl:first-child {
    padding-right: 20px;
    box-sizing: border-box;
  }
  #footer_box .footer_link dl dt {
    color: var(--footer-dt-color);
    font-size: 16px;
    margin-bottom: 20px;
    line-height: 30px;
  }
  #footer_box .footer_link dl dt path {
    fill: var(--footer-dt-color);
  }
  #footer_box .footer_link dl.footer_con dt a {
    font-size: 30px;
    line-height: 30px;
    text-decoration: none;
  }
  #footer_box .footer_link dl.footer_con dt a img {
    max-height: 30px;
    max-width: 100%;
  }
  #footer_box .footer_link dl.footer_nav > dt {
    margin-bottom: 15px;
    font-size: 16px;
  }
  #footer_box .footer_link dl.footer_nav dd a {
    position: relative;
    display: inline-block;
    color: var(--footer-font-color);
  }
  #footer_box .footer_link dl.footer_nav dd a:after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    right: 0;
    width: 0;
    height: 1px;
    background-color: var(--footer-dt-color);
    transition: 0.5s;
    opacity: 0;
  }
  #footer_box .footer_link dl.footer_nav dd a:hover:after {
    opacity: 1;
    width: 100%;
  }
  #footer_box .copyright {
    border-top: 1px solid rgba(0, 0, 0, 0.15);
    padding: 20px 0;
    text-align: center;
    margin-top: 50px;
  }
  #footer_box .footer_link a {
    display: block;
  }
  #footer_box .footer_link .footer_nav_item {
    padding: 5px 0;
  }
  #footer_box .zuui-share-link {
    margin-top: 20px;
    display: flex;
    flex-wrap: wrap;
  }
  #footer_box .share_link a {
    margin-right: 10px;
    margin-bottom: 10px;
  }
  #footer_box .share_link a svg {
    width: 20px;
    margin-right: 5px;
  }
  #footer_box .share_link a span {}
@media screen and (max-width: 768px) {
  #footer_box .footer_link {
    flex-wrap: wrap;
  }
  #footer_box .footer_link dl {
    width: calc(50% - 30px);
    margin-bottom: 30px;
  }
  #footer_box .copyright {
    margin-top: 20px;
  }
}
@media screen and (max-width: 767px) {
  #footer_box .footer_wrapper {
    flex-direction: column;
  }
  #footer_box .copyright,
  #footer_box .footer_link {
    width: 100%;
  }
  #footer_box .footer_link {
    flex-wrap: wrap;
  }
  #footer_box .footer_link dl {
    width: 100%;
    margin-bottom: 0;

  }
  #footer_box .footer_link dl:first-child {
    border: none;
    margin-bottom: 50px;
  }
  #footer_box .footer_link dl:last-child dt,
  #footer_box .footer_link dl.footer_nav > dt {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 0;
    height: 50px;
    border-bottom: 1px solid #cdcdcd;
  }
  #footer_box .footer_link dl dd.footer_nav_list {
    display: none;
    padding: 15px 0 0;
  }
  #footer_box .share_link {
    justify-content: center;
  }
  #footer_box .copyright {
    margin-top: 0;
    text-align: center;
  }
  #footer_box .footer_link dt .footer_nav_down {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 14px;
    height: 14px;
    transition: all 0.25s;
  }
  #footer_box .footer_link .dl_on dt .footer_nav_down {
    transform: rotate(-180deg);
  }

  #footer_box {
    border-top: 1px solid rgba(0, 0, 0, 0.15);
  }
  #footer_box .footer_link {
    border: none;
  }
}

{% endstylesheet %}
<div
  id="footer_box"
  style="--footer-bg-color:{{section.settings.bg-color}};--footer-font-color:{{section.settings.font-color}};--footer-dt-color:{{section.settings.dt-font-color}}"
  class="footer_box">
  <div class="footer_wrapper container_wrapper">
    <div class="footer_link">
      <dl class="footer_con">
        <dt>
          <a href="/">
            {% if section.settings.footer_logo_pic.src %}
              <img src="{{ section.settings.footer_logo_pic.src  | image_url:'600x600' }}" alt="{{ section.settings.footer_logo_pic.alt}}">
            {% else %}
              {{ storeConfig.name }}
            {% endif %}
          </a>
        </dt>
        <dd>{{ section.settings.footer_content1 }}</dd>
      </dl>
      <dl class="footer_nav">
        {% if section.settings.nav_title_2 != '' %}
          <dt>{{ section.settings.nav_title_2 }}
            <span class="footer_nav_down">{% include "icon_header_down", {width: '14', height: '14' } %}</span>
          </dt>
        {% endif %}
        {% if section.settings.nav1.id %}
          {% get_nav nav_id={section.settings.nav1.id} %}
          <dd class="footer_nav_list">
            {% for item in nav.nav_item %}
              <div class="footer_nav_item">
                <a
                  style="color:{{item.setting_json.color}};font-style:{{item.setting_json.style}};font-weight:{{item.setting_json.bold}};text-decoration:{{item.setting_json.decoration}};"
                  target="{{item.setting_json.open | default : '_self' }}"
                  {% if item.setting_json.model != 1 %}
                  rel="external nofollow"
                  {% endif %}
                  href="{{item.url_json.url | default:'javascript:void(0)' }}">
                  {% if item.src %}
                    <header-nav-img>{% include 'lazy_img', src: item.src, alt: '' %}{{ item.nav_item_name }}</header-nav-img>
                  {% else %}
                    {{ item.nav_item_name }}
                  {% endif %}
                </a>
              </div>
            {% endfor %}
          </dd>

        {% else %}
          <dd class="footer_nav_list">
            <div class="footer_nav_item">
              <a href="javascript:void(0)">Orders</a>
            </div>
            <div class="footer_nav_item">
              <a href="javascript:void(0)">Products</a>
            </div>
            <div class="footer_nav_item">
              <a href="javascript:void(0)">Our Company</a>
            </div>
          </dd>
        {% endif %}
      </dl>
      <dl class="footer_nav">
        {% if section.settings.nav_title_3 != '' %}
          <dt>{{ section.settings.nav_title_3 }}
            <span class="footer_nav_down">{% include "icon_header_down" , { width: '14', height: '14' } %}</span>
          </dt>
        {% endif %}
        {% if section.settings.nav2.id %}
          {% get_nav nav_id={section.settings.nav2.id} %}
          <dd class="footer_nav_list">
            {% for item in nav.nav_item %}
              <div class="footer_nav_item">
                <a
                  style="color:{{item.setting_json.color}};font-style:{{item.setting_json.style}};font-weight:{{item.setting_json.bold}};text-decoration:{{item.setting_json.decoration}};"
                  target="{{item.setting_json.open | default : '_self' }}"
                  {% if item.setting_json.model != 1 %}
                  rel="external nofollow"
                  {% endif %}
                  href="{{item.url_json.url | default:'javascript:void(0)' }}">
                  {% if item.src %}
                    <header-nav-img>{% include 'lazy_img', src: item.src, alt: '' %}{{ item.nav_item_name }}</header-nav-img>
                  {% else %}
                    {{ item.nav_item_name }}
                  {% endif %}
                </a>
              </div>
            {% endfor %}
          </dd>
        {% else %}
          <dd class="footer_nav_list">
            <div class="footer_nav_item">
              <a href="javascript:void(0)">Orders</a>
            </div>
            <div class="footer_nav_item">
              <a href="javascript:void(0)">Products</a>
            </div>
            <div class="footer_nav_item">
              <a href="javascript:void(0)">Our Company</a>
            </div>
          </dd>
        {% endif %}
      </dl>
      <dl class="footer_con">
        {% if section.settings.nav_title_4 != '' %}
          <dt>{{ section.settings.nav_title_4 }}
            <span class="footer_nav_down">{% include "icon_header_down" , {width: '14', height: '14' } %}</span>
          </dt>
        {% endif %}

        <dd class="footer_nav_list">{{ section.settings.footer_content2 }}</dd>
        <dd>
          {% include 'share_link' , color: section.settings.font-color , section: section.settings %}
        </dd>
      </dl>
    </div>
    <div class="copyright">{{ section.settings.copyright | parse_variables }}</div>
  </div>

</div>
<script type="text/javascript">
    $('.footer_nav_down').click(function(){
        if($(this).parents('dl').hasClass('dl_on')){
            $(this).parents('dl').removeClass('dl_on');
            $(this).parents('dl').find('.footer_nav_list').slideUp();
        }else{
            $(this).parents('dl').addClass('dl_on');
            $(this).parents('dl').find('.footer_nav_list').slideDown();
        }
        
    })
</script>
{% schema %}
{
	"tag": "footer",
	"class": "footer",
	"is_global": true,
	"name": {
		"zh_CN": "底部",
		"en_US": "Bottom"
	},
	"max_blocks": "0",
	"settings": [
		{
			"type": "card_header",
			"label": {
				"zh_CN": "菜单1导航设置",
				"en_US": "Menu 1 Navigation Settings"
			}
		},
		{
			"type": "card_image",
			"label": {
				"zh_CN": "底部logo图片",
				"en_US": "Bottom logo image"
			},
			"id": "footer_logo_pic"
		},
		{
			"type": "card_text_editor",
			"label": {
				"zh_CN": "文本编辑",
				"en_US": "Text editing"
			},
			"id": "footer_content1"
		},
		{
			"type": "card_header",
			"label": {
				"zh_CN": "菜单2导航设置",
				"en_US": "Menu 2 Navigation Settings"
			}
		},
		{
			"type": "card_input",
			"id": "nav_title_2",
			"label": {
				"zh_CN": "菜单2标题",
				"en_US": "Menu 2 title"
			},
			"placeholder": {
				"zh_CN": "请输入标题",
				"en_US": "Please enter title"
			}
		},
		{
			"type": "card_nav",
			"label": {
				"zh_CN": "选择菜单2",
				"en_US": "Select menu 2"
			},
			"id": "nav1"
		},
		{
			"type": "card_header",
			"label": {
				"zh_CN": "菜单3导航设置",
				"en_US": "Menu 3 Navigation Settings"
			}
		},
		{
			"type": "card_input",
			"id": "nav_title_3",
			"label": {
				"zh_CN": "菜单3标题",
				"en_US": "Menu 3 title"
			},
			"placeholder": {
				"zh_CN": "请输入标题",
				"en_US": "Please enter title"
			}
		},
		{
			"type": "card_nav",
			"label": {
				"zh_CN": "选择菜单3",
				"en_US": "Select Menu 3"
			},
			"id": "nav2"
		},
		{
			"type": "card_header",
			"label": {
				"zh_CN": "菜单4导航设置",
				"en_US": "Menu 4 Navigation Settings"
			}
		},
		{
			"type": "card_input",
			"id": "nav_title_4",
			"label": {
				"zh_CN": "菜单4标题",
				"en_US": "Menu 4 title"
			},
			"placeholder": {
				"zh_CN": "请输入标题",
				"en_US": "Please enter title"
			}
		},
		{
			"type": "card_text_editor",
			"label": {
				"zh_CN": "文本编辑",
				"en_US": "Text editing"
			},
			"id": "footer_content2"
		},
		{
			"type": "card_header",
			"label": {
				"zh_CN": "设置",
				"en_US": "Settings"
			}
		},
		{
			"type": "card_color",
			"label": {
				"zh_CN": "背景颜色",
				"en_US": "Background color"
			},
			"id": "bg-color"
		},
		{
			"type": "card_color",
			"label": {
				"zh_CN": "字体颜色",
				"en_US": "Font color"
			},
			"id": "font-color"
		},
		{
			"type": "card_color",
			"label": {
				"zh_CN": "表头颜色",
				"en_US": "Head color"
			},
			"id": "dt-font-color"
		},
		{
			"type": "card_text_editor",
			"label": {
				"zh_CN": "底部版权",
				"en_US": "Bottom copyright"
			},
			"id": "copyright"
		},
		{
			"type": "card_header",
			"label": {
				"zh_CN": "SNS账号",
				"en_US": "SNS account"
			}
		},
		{
			"type": "card_switch",
			"label": {
				"zh_CN": "Facebook",
				"en_US": "Facebook"
			},
			"id": "is_facebook"
		},
		{
			"type": "card_switch",
			"label": {
				"zh_CN": "Twitter",
				"en_US": "Twitter"
			},
			"id": "is_twitter"
		},
		{
			"type": "card_switch",
			"label": {
				"zh_CN": "Pinterest",
				"en_US": "Pinterest"
			},
			"id": "is_pinterest"
		},
		{
			"type": "card_switch",
			"label": {
				"zh_CN": "Instagram",
				"en_US": "Instagram"
			},
			"id": "is_instagram"
		},
		{
			"type": "card_switch",
			"label": {
				"zh_CN": "Snapchat",
				"en_US": "SnaPChat"
			},
			"id": "is_snapchat"
		},
		{
			"type": "card_switch",
			"label": {
				"zh_CN": "Tiktok",
				"en_US": "Tiktok"
			},
			"id": "is_tiktok"
		},
		{
			"type": "card_switch",
			"label": {
				"zh_CN": "Tumblr",
				"en_US": "Tumblr"
			},
			"id": "is_tumblr"
		},
		{
			"type": "card_switch",
			"label": {
				"zh_CN": "Linkedin",
				"en_US": "Linkedin"
			},
			"id": "is_linkedin"
		},
		{
			"type": "card_switch",
			"label": {
				"zh_CN": "Youtube",
				"en_US": "Youtube"
			},
			"id": "is_youtube"
		},
		{
			"type": "card_switch",
			"label": {
				"zh_CN": "Vimeo",
				"en_US": "Vimeo"
			},
			"id": "is_vimeo"
		},
		{
			"type": "card_switch",
			"label": {
				"zh_CN": "VK",
				"en_US": "VK"
			},
			"id": "is_vk"
		},
		{
			"type": "card_switch",
			"label": {
				"zh_CN": "Whatsapp",
				"en_US": "Whatsapp"
			},
			"id": "is_whatsapp"
		},
		{
            "type": "card_switch",
            "label": {
                "zh_CN": "Line",
                "en_US": "Line"
            },
            "id": "is_line"
        }
	],
	"blocks": [],
	"default": {
		"settings": {
			"footer_logo_pic": {
				"src": "",
				"alt": ""
			},
			"footer_content1": "<p>Razzi is more than a leading retailer of home decor and gifts. We help our customers create the backdrop for memorable life events</p>",
			"nav_title_2": "ABOUT US",
			"nav1": {
				"id": "",
				"title": ""
			},
			"nav_title_3": "CUSTOMER SERVICES",
			"nav2": {
				"id": "",
				"title": ""
			},
			"nav_title_4": "CONTACT",
			"footer_content2": "<p>Phone: 1-234-567-999<br />Email: xxx@xxx.com<br />Working hours from 8AM &ndash; 18AM EST</p>",
			"bg-color": "#FFFFFF",
			"font-color": "#000000",
			"dt-font-color": "#000000",
			"copyright": "@{{ date_year }}{{ storeConfig.name }}{{ current_domain }}",
			"is_facebook": true,
			"is_twitter": true,
			"is_pinterest": true,
			"is_instagram": false,
			"is_snapchat": false,
			"is_tiktok": false,
			"is_tumblr": false,
			"is_linkedin": false,
			"is_youtube": false,
			"is_vimeo": false,
			"is_vk": false,
			"is_whatsapp": false,
			"is_line": false,
			"settings": {
				"nav2": {
					"id": "",
					"title": ""
				}
			}
		},
		"blocks": [],
		"type": "footer"
	}
}
{% endschema %}